import React, {Component} from 'react';
import './News_list.css';
import {Button, Table} from "antd";

const iniData = [
    {
        "title": '/user/info.html',
        "method": 'GET',
        "description": '获取用户的缩略信息',
    },
    {
        "title": '/main/home.html',
        "method": 'GET',
        "description": '访问后台系统的home页面',
    },
    {
        "title": "/main/user",
        "method": 'POST',
        "description": "访问用户列表信息"
    },
    {
        "title": '/user/info23.html',
        "method": 'GET',
        "description": '获取用户的缩略信息123123',
    },
    {
        "title": '/main/home.html',
        "method": 'GET',
        "description": '访问后台系统的home页面11231',
    },
    {
        "title": "/main/user1",
        "method": 'POST',
        "description": "访问用户列表信息1123"
    },{
        "title": '/user/info332.html',
        "method": 'GET',
        "description": '获取用户的缩略信息123123',
    },
    {
        "title": '/main/home787.html',
        "method": 'GET',
        "description": '访问后台系统的home页面45456',
    },
    {
        "title": "/main/user544",
        "method": 'POST',
        "description": "访问用户列表信息3567"
    },
]

export default class Port_list extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
        }
    }

   componentDidMount = () => {
       this.setState({
           data: iniData,
       })
   }
   handleClick = (i) => {
       const data = this.state.data;
       data.splice(i, 1);
       this.setState({
           data: data,
       })
   }

    render() {
        const columns = [{
            title: 'url',
            dataIndex: 'url',
        },{
            title: 'method',
            dataIndex: 'method',
        },{
            title: 'description',
            dataIndex: 'description',
        },{
            title: 'action',
            dataIndex: 'action'
        }]

        const datas = [];
        const dataItem = this.state.data;
        const len = dataItem.length;
        for(let i = 0; i< len; i++){
            datas.push({
                url: dataItem[i].title,
                method: dataItem[i].method,
                description: dataItem[i].description,
                action: <span><Button type = 'primary' onClick = {() => this.handleClick(i)}>删除</Button></span>
            })
        }

        return (
            <div id="news_list">
                <div className="col-md-12 col-sm-12">
                    <h2>接口列表</h2>
                    <h4>您可以创建新的接口，也可以查看接口列表。</h4>
                    <Table columns = {columns} dataSource = {datas} 
                        pagination = {{
                            showSizeChanger : true,
                            defaultCurrent : 1,
                            defaultPageSize: 4,
                            total: len,
                            pageSizeOptions : ['4', '10', '30', '50'],//页数选择
                        }}
                    />
                </div>
            </div>
        )
    }
}